<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>

    <!--卡片视图区域-->
    <el-card>
      <el-row>
        <el-col>
          <el-button type="primary" @click="showCateDialog">添加分类</el-button>
        </el-col>
        <!--添加表格-->
        <tree-table class="treeTable" :data="cateList" :columns="columns" :selection-type="false"
         :expand-type="false" show-index index-text="#" border :show-row-hover="false">
          <!--是否有效-->
          <template slot="isok" slot-scope="scope">
            <i class="el-icon-success" v-if="scope.row.cat_deleted===false" style="color:lawngreen"></i>
            <i class="el-icon-error" v-else  style="color:red"></i>
          </template>
          <!--排序-->
          <template slot="order" slot-scope="scope">
            <el-tag size="mini" v-if="scope.row.cat_level===0">一级</el-tag>
            <el-tag size="mini" type="success" v-if="scope.row.cat_level===1">二级</el-tag>
            <el-tag size="mini" type="waring" v-if="scope.row.cat_level===2">三级</el-tag>
          </template>
          <!--操作-->
          <template slot="opt" slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
            <el-button type="danger"  icon="el-icon-delete" size="mini">删除</el-button>
          </template>
        </tree-table>
        <!--添加分页-->
      </el-row>

      <!--分页区域-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNum"
        :page-sizes="[3, 5, 10, 20, 30]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>

    <!--添加分类对话框-->
    <el-dialog title="添加分类" :visible.sync="addCateDialogVisible" width="50%" @close="addCateDialogClose">
      <!--内容主体区域-->
      <el-form :model="addCateForm" :rules="addCateFormRules"  ref="addCateFormRef"
               label-width="80px">
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="addCateForm.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="父级分类">
          <!--opting用来指定数据源-->
          <!--props用来指定配置对象-->
          <el-cascader
            v-model="selectedKeys"
            :options="parentCateList"
            :props="cascaderProps"
            clearable
            :change-on-select="true"
            @change="parentCateChange()">
          </el-cascader>
        </el-form-item>
      </el-form>
      <!--底部区域-->
      <div slot="footer" class="dialog-footer">
        <el-button @click="addCateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCate">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  let catejson=require('./json/cate.json')
  let parentCatejson=require('./json/parentCate.json')
console.log(catejson)
    export default {
      name: "cate",
      data(){
          return{
            queryInfo:{
              type:[1,2,3],
              pageNum: 1,
              //当前每页显示多少条相间
              pageSize: 3
            },
          //  商品分类列表
            cateList:[],
            //总数据条数
            total:0,
            //为table指定列标题
            columns:[
              {
                label: "分类名称",
                prop: "cat_name"
              },{
                label: "是否有效",
                // 表示将当前列为模板列
                type:"template",
                //模板名称
                template:"isok"
              },{
                label: "排序",
                // 表示将当前列为模板列
                type:"template",
                //模板名称
                template:"order"
              },{
                label: "操作",
                // 表示将当前列为模板列
                type:"template",
                //模板名称
                template:"opt"
              }
            ],
            addCateDialogVisible:false,
            addCateForm:{
              cat_name:'',
              cat_pid:0,
              //默认一级分类
              cat_level:0
            },
          //验证规则
            addCateFormRules:{
              cat_name:[
                  {required: true,message:'请输入分类名称',trigger:'blur'}
              ]
            },
            parentCateList:[],
            //级联对象的配置属性
            cascaderProps:{
              expandTrigger:"hover",
              value:'id',
              label:'cat_name',
              children:'children'
            },
          //选中的数组
            selectedKeys:[]
          }
      },
      created(){
        this.getCateList()
      },
      methods:{

        async getCateList(){
          this.cateList=catejson
          return
          const {data: res}= await this.$http.get(`categories`,{
            params:this.queryInfo
          })
          if(res.meta!==200){
            return this.$message.error('获取商品分类信息失败')
          }
          //把数据列表赋值给列表
          this.cateList=res.data.result;
          this.total=res.data.total;
        },
        //监听pagesize改变事件
        handleSizeChange(newSize) {
          console.log(`每页 ${newSize} 条`);
          this.queryInfo.pageSize=newSize
          this.getCateList()
        },
        //监听页码值改变的事件
        handleCurrentChange(newPageNum) {
          console.log(`当前页: ${newSize}`);
          this.queryInfo.pageNum=newPageNum
          this.getCateList()
        },
      //  点击按钮，展示分类对话框
        showCateDialog(){
          //先获取父级分类列表
          this.getParentCateList()
          this.addCateDialogVisible=true
        },
        async getParentCateList(){

          this.parentCateList=parentCatejson
          return

          const {data:res}=await this.$http.get(`categories`,{
            params:{type:2}
          })
          if (res.meta.status!==200){
            return this.$message.error('获取数据失败')
          }
          this.parentCateList=res.data;
        },
      //  选择项发生变化触发
        parentCateChange(){
          console.log(this.selectedKeys)
        //  如果selectedKeys的lenth大于0，说明选择了父类，如果=0，说明没有选择父类
          if(this.selectedKeys.length>0){
            //父级分类的Id
            this.addCateForm.cat_pid=this.selectedKeys[this.selectedKeys.length - 1]
            this.addCateForm.cat_level=this.selectedKeys.length
            return
          }else{
            this.addCateForm.cat_pid='0'
            this.addCateForm.cat_level='0'
          }
        },
        addCate(){
          console.log(this.addCateForm);
          //验证表单
          this.$refs.addCateFormRef.validate( async valid=>{
            if(!valid){
              return
            }
            //提交保存表单
            const {data:res} = await this.$http.post('categories',this.addCateForm)
            if (res.meta!==200){
              return this.$message.error('保存分类信息失败')
            }

            this.$message.info('保存分类信息成功')
            //重新刷新数据列表
            this.getCateList();

          })

          this.addCateDialogVisible = false
        },
        //关闭对话框，重置数据
        addCateDialogClose(){
          this.$refs.addCateFormRef.resetFields()
          this.selectedKeys=[]
          this.addCateForm.cat_pid=0
          this.addCateForm.cat_level=0
        }
      }
    }
</script>

<style lang="less" scoped>
  .treeTable {
    margin-top: 50px;
  }
  .el-cascader{
    width:100%
  }
</style>
